<template>
  <a-card class="tree-card">
    <!-- 树形组件 -->
    <a-tree
      v-if="treeData.length"
      default-expand-all
      block-node
      :tree-data="treeData"
      :field-names="fieldNames"
    >
    </a-tree>
  </a-card>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { getDepartment } from '@/api/department'
import { tranListToTreeData } from '@/utils'
const treeData = ref([]) // 声明初始化数据
const fieldNames = {
  title: 'name',
  key: 'id'
}
onMounted(() => {
  getDeparts()
})

const getDeparts = async () => {
  const { depts } = await getDepartment()
  treeData.value = tranListToTreeData(depts, '')
}
</script>

<style scoped>
.tree-card {
  margin: 20px;
}
</style>
